<template>
  <div id="article-page" class="article-detail">
    <el-skeleton :rows="10" animated :loading="skeletonShow"/>
    <div class="article-box" v-if="!skeletonShow">
        <h2 class="artice-title">{{article.title}}</h2>
        <article class="article"><div v-html="article.content"></div></article>
    </div>
    <div class="article-info" v-if="!skeletonShow">
        <div class="article-info-item clear">
            <p class="label">
                <Icon size="16px" name="mdi:clock-time-nine-outline" />
                <span>发布日期：</span>
            </p>
            <p class="value">{{date.turn(article.update_time,'年月日')}}</p>
        </div>
        <div class="article-info-item clear">
             <p class="label">
                <Icon size="16px" name="mdi:eye" />
                <span>浏览量：</span>
            </p>
            <p class="value">{{article.view}}</p>
        </div>
        <div class="article-info-item clear" v-if="article.tags.length>0">
             <p class="label">
                <Icon size="16px" name="fa6-solid:tags" />
                <span>标签：</span>
            </p>
            <p class="value">
              {{article.tagText}}
            </p>
        </div>
        <div class="article-info-item clear">
             <p class="label">
                <Icon size="16px" name="material-symbols:view-list-sharp" />
                <span>分类：</span>
            </p>
            <p class="value">{{article.classify.name}}</p>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import date from '@/utils/date'
const { public: { siteTitle } } = useRuntimeConfig()
const route = useRoute()
const { articleApi } = useApi()
const skeletonShow = ref(true)
interface article {
  title:string,
  desc:string
}
const setHead = (article:article) => {
  useHead({
    title:`${article.title}|${siteTitle}`,
    meta: [
       {
         hid: 'description',
         name: 'description',
         content: article.desc||'达文西的快乐星球，个人技术博客'
       },
       {
         hid: 'keywords',
         name: 'keywords',
         content: `${article.title},达文西的快乐星球,SNBLOG`
       }
     ]
  })
}
let {data:article} = await articleApi.getDetail(Number(route.query.id))
const tags = []
for(let i of article.tags){
  tags.push(i.name)
}
article.tagText = tags.join('、')
skeletonShow.value = false
setHead(article)
watch(() => route.query, async ()=>{
  skeletonShow.value = true
  const {data:resultArticle} = await articleApi.getDetail(Number(route.query.id))
  const tags = []
  for(let i of resultArticle.tags){
    tags.push(i.name)
  }
  resultArticle.tagText = tags.join('、')
  setHead(resultArticle)
  article = resultArticle
  skeletonShow.value = false
})
</script>

<style lang="less">
  @import "../assets/styles/pages/article-detail.less";
</style>